<template>
  <div class="time_node_table">
    <div class="table_header">
      <div class="header_item" v-for="(item, index) in header" :key="index">
        <div class="header_title">{{ item[0] }}</div>
        <div class="header_title">{{ item[1] }}</div>
      </div>
    </div>
    <div class="table_body">
      <div class="data_item" v-for="(item, index) in timeMapping" :key="item">
        <div class="time_label">{{ item }}</div>
        <div class="time_value">
          <input
            type="text"
            @input="validateInput($event)"
            class="time_value__inner"
            v-model="timeData[index]"
            :disabled="disabled"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { nextTick, ref, watch } from "vue";

const header = ref([]);
const timeMapping = ref();
const timeData = ref([]);

const props = defineProps({
  headerInfo: {
    type: Array,
    default: () => [],
  },
  timeDataArr: {
    type: Array,
    default: () => [],
  },
  timeQuantumMapping: {
    type: Object,
    default: () => {},
  },
  number: {
    type: Number,
    default: 8,
  },
  decimalPointNums: {
    type: Number,
    default: 5,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

watch(
  () => props.headerInfo,
  (newValue) => {
    const headerArr = [];
    for (let i = 0; i < props.number; i++) {
      headerArr.push(newValue);
    }
    header.value = headerArr;
  },
  {
    immediate: true,
  },
);

watch(
  () => props.timeDataArr,
  (newValue) => {
    timeData.value = JSON.parse(JSON.stringify(newValue));
  },
  {
    immediate: true,
  },
);

watch(
  () => props.timeQuantumMapping,
  (newValue) => {
    timeMapping.value = Object.values(newValue);
    timeData.value = JSON.parse(JSON.stringify(props.timeDataArr));
    nextTick(() => {
      getColumn();
    });
  },
  {
    immediate: true,
  },
);

// 改变列数
const getColumn = () => {
  const headerArr = [];
  for (let i = 0; i < props.number; i++) {
    headerArr.push(props.headerInfo);
  }
  header.value = headerArr;
  const body = document.querySelector(".table_body");
  body.style["grid-template-columns"] = `repeat(${props.number}, 1fr)`;
};

// 校验输入
const validateInput = (event) => {
  const inputElement = event.target;
  const value = inputElement.value;
  const regex = /^\d+\.?\d*$/;
  if (!regex.test(value)) {
    inputElement.value = "";
  }
  if (
    inputElement.value &&
    inputElement.value.indexOf(".") > -1 &&
    inputElement.value.split(".")[1].length > props.decimalPointNums
  ) {
    inputElement.value = inputElement.value.substring(
      0,
      inputElement.value.length - 1,
    );
  }
};

defineExpose({
  timeData,
  getColumn,
});
</script>

<style lang="less" scoped>
.table_header {
  display: flex;
  border-right: 1px solid @default;
  text-align: center;
  line-height: 36px;
  background-color: rgba(17, 98, 98, 0.75);

  .header_item {
    flex: 1;
    height: 36px;
    display: flex;
    align-items: center;
    border-top: 1px solid @default;
    border-bottom: 1px solid @default;
    border-left: 1px solid @default;

    .header_title {
      flex: 1;
      height: 100%;
    }

    .header_title:nth-child(1) {
      border-right: 1px solid @default;
    }
  }
}

.table_body {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border-left: 1px solid @default;
  text-align: center;
  line-height: 36px;

  .data_item {
    background-color: rgba(16, 16, 16, 0.69);
    border-right: 1px solid @default;
    border-bottom: 1px solid @default;
    display: flex;
    align-items: center;
    font-size: 14px;

    .time_label {
      flex: 1;
      height: 100%;
      border-right: 1px solid @default;
      background-color: rgba(104, 187, 196, 0.11);
    }

    .time_value {
      flex: 1;
      height: 100%;
    }

    .time_value__inner {
      text-align: center;
      width: 100%;
      background-color: transparent;
      color: #fff;
      border: none;

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
      }
    }
  }
}
</style>
